<template>
  <div :class="messageClasses">
    <div :class="bubbleClasses">
      <p>{{ message.content }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Message } from '../types'

interface Props {
  message: Message
}

const props = defineProps<Props>()

const isFromCurrentUser = computed(() => props.message.senderId === 'recruiter-1')

const messageClasses = computed(() => [
  'flex items-end mb-4',
  isFromCurrentUser.value ? 'justify-end' : ''
])

const bubbleClasses = computed(() => [
  'max-w-[80%] rounded-lg p-3 shadow-sm',
  isFromCurrentUser.value 
    ? 'bg-blue-600 text-white' 
    : 'bg-white text-gray-900'
])
</script>
